<template>
	<view class="buy-member">
		<view>
			<view class="section" v-if="list.recharge.length > 0">
				<view class="top">
					<view class="title"><text>充值会员，无限畅洗</text></view>
					<view class="tips"><text>智助洗车、智动洗车通用</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.recharge" :key="index"
						@click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL" v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c img-text" style="color: #685712;padding-left: 10rpx;" v-if="item.selfServiceCarWashGitCardList">
							<view><text style="font-size: 28rpx;font-weight: bold;">{{item.card_Cost}}</text><text>元</text>
							</view>
							<view class="scale" style="font-size: 18rpx;line-height: 30rpx;width: 260rpx;" v-for="(item2,index2) in item.selfServiceCarWashGitCardList" :key='item2.id'>
								<view>({{item2.coupon_Name}}x{{item2.limit_Times}})</view>
							</view>
						</view>
						<view class="flex img-text flex-jc-c flex-ai-c" style="color: #685712;padding-bottom: 10rpx;" v-else>
							<view>
								<text style="font-size: 28rpx;font-weight: bold;">{{item.card_Cost}}</text><text>元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
						
			<view class="section" v-if="list.month.length > 0">
				<view class="top">
					<view class="title"><text>包月服务会员，天天免费洗</text></view>
					<view class="tips"><text>适合经常洗车用户，冲水、泡沫或吸尘时计时，每天上限30分钟。</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.month"
						:key="index" @click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL"
							v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text"
							style="padding-left: 10rpx;">
							<view class="name" style="color: #2F2F2F;font-size: 26rpx;">
								{{item.coupon_Name | cutString(14)}}</view>
							<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text
									style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text
									style="text-decoration: line-through;">{{item.normal_Price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
						
			<view class="section" v-if="list.second.length > 0">
				<view class="top">
					<view class="title"><text>次卡会员，洗一次扣一次</text></view>
					<view class="tips"><text>适合不定期洗车用户，冲水、泡沫或吸尘时计时，每次可洗20分钟。</text></view>
				</view>
				<view class="list">
					<view v-for="(item, index) in list.second"
						:key="index" @click="onClickItem(item)">
						<view class="item" style="position: relative;" v-if="item.id!=='37'">
							<image style="position: absolute;" class="img" :src="item.pic_URL"
								v-if="item.pic_URL"></image>
							<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text"
								style="padding-left: 10rpx;">
								<view class="name" style="color: #2F2F2F;font-size: 26rpx;">
									{{item.coupon_Name | cutString(14)}}</view>
								<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text
										style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text
										style="text-decoration: line-through;">{{item.normal_Price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
						
			<view class="section" v-if="list.minute.length > 0">
				<view class="top">
					<view class="title"><text>计时会员，按时间消耗</text></view>
					<view class="tips"><text>自由洗车，冲水、泡沫或吸尘时计时。</text></view>
				</view>
				<view class="list">
					<view class="item" style="position: relative;" v-for="(item, index) in list.minute"
						:key="index" @click="onClickItem(item)">
						<image style="position: absolute;" class="img" :src="item.pic_URL"
							v-if="item.pic_URL"></image>
						<view class="flex flex-dir-c flex-ai-fs flex-jc-c img-text"
							style="padding-left: 10rpx;">
							<view class="name" style="color: #2F2F2F;font-size: 26rpx;">
								{{item.coupon_Name | cutString(14)}}</view>
							<view style="color: #fff;width: 100%;font-size: 20rpx;">￥<text
									style="font-size: 24rpx;font-weight: bold;margin-right: 10rpx;">{{item.sale_Price}}</text>￥<text
									style="text-decoration: line-through;">{{item.normal_Price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 70vh;" v-if="emptyShow">
			<u-empty mode="coupon"></u-empty>
		</view>
		
		<view class="section" v-else>
			<view class="top">
				<view class="title"><text>会员特权</text></view>
			</view>
			<view class="list-privilege">
				<view class="item">
					<view class="icon-box">
						<image class="img"
							src="https://files.yzsheng.com/client/selfwash/privilege_1.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>全国洗车点通用</text></view>
						<view class="desc"><text>大平台有保障，一次购买，全国通用。</text></view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box">
						<image class="img"
							src="https://files.yzsheng.com/client/selfwash/privilege_2.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>机器故障保险</text></view>
						<view class="desc"><text>如果遇到机器故障无法洗车，则无条件补偿当次消耗。</text></view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box">
						<image class="img"
							src="https://files.yzsheng.com/client/selfwash/privilege_3.png"></image>
					</view>
					<view class="right">
						<view class="title"><text>保养/美容/维修尽享折扣</text></view>
						<view class="desc"><text>官方不定期将有好礼券相送享受保养/美容/维修等减免。</text></view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			machineId:{
				trpe:String,
				default:''
			},
			list:{
				type:[Array,Object],
				default:()=>{}
			},
			emptyShow:{
				type:Boolean,
				default:false,
			}
		},
		computed: {
		  purchaseChannel() {
		    return this.$store.state.purchaseChannel
		  },
		  amount() {
		    let price = 0
		    if(this.current) {
		      if(this.couponInfo) {
		        price = Number(this.current.sale_Price) - this.couponInfo.couponAllMoney
		      } else {
		        price = Number(this.current.sale_Price)
		      }
		    } else {
		      price = 0
		    }
		    return parseFloat(price).toFixed(2)
		  }
		},
		data(){
			return{

			}
		},
		filters: {
		  cutString(str, len) {
		    if (str.length * 2 <= len) {
		      return str
		    }
		    let strlen = 0
		    let s = ''
		    for (let i = 0; i < str.length; i++) {
		      s = s + str.charAt(i)
		      if (str.charCodeAt(i) > 128) {
		        strlen = strlen + 2
		        if (strlen >= len) {
		          return s.substring(0, s.length - 1) + '...'
		        }
		      } else {
		        strlen = strlen + 1
		        if (strlen >= len) {
		          return s.substring(0, s.length - 2) + '...'
		        }
		      }
		    }
		    return s
		  },
		},

		methods:{
			onClickItem(item) {
				this.$emit('click',item)
			},
			
			
			
		}
	}
</script>

<style lang="scss">
	.scale {
		transform: scale(0.8);
		transform-origin: 0 0;
	}
	.img-text{
			position: absolute;
			z-index: 1;
			line-height: 40rpx;
			width: 100%;
			height: 100%;
			top: 15rpx;
		}
		.img-text-2{
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			padding-left: 10rpx;
			top: 0rpx;
			line-height: 35rpx;
			margin-top: 5rpx;
		}
		.sale-price{
			font-weight: bold;
			color: #685712;
		}
		.name{
			font-size: 26px;
			font-weight: bold;
			color: #2F2F2F;
			text-shadow: 3rpx 2rpx 4rpx rgba(47, 47, 47, 0.5);
		}
		.free-cost{
			color: rgb(255,106,105);
			font-weight: lighter;
			font-size: 24rpx;
		}
	.buy-member{
	  .section{
	    background-color: #fff;
	    margin-bottom: 16rpx;
	    padding: 30rpx;
	    .top{
	      .title{
	        font-size: 28rpx;
	        color: #333;
	        font-weight: bold;
	      }
	      .tips{
	        font-size: 20rpx;
	        color: #999;
	        margin-top: 10rpx;
	      }
	    }
	    .list{
	      display: flex;
	      flex-direction: row;
	      flex-wrap: wrap;
	      margin-left: -30rpx;
	      .item{
	        width: 212rpx;
	        height: 140rpx;
	        border-radius: 10rpx;
	        background-color: #FEDD58;
	        margin: 30rpx 0 0 28rpx;
	        overflow: hidden;
	        .img{
	          width: 100%;
	          height: 100%;
	        }
	      }
	    }
	    .list-privilege{
	      margin-top: 10rpx;
	      .item{
	        display: flex;
	        align-items: center;
	        padding: 20rpx 0;
	        .icon-box{
	          width: 60rpx;
	          height: 60rpx;
	          .img{
	            width: 60rpx;
	            height: 60rpx;
	          }
	        }
	        .right{
	          display: flex;
	          flex-direction: column;
	          justify-content: center;
	          margin-left: 16rpx;
	          flex: 1;
	          .title{
	            font-size: 24rpx;
	            color: #333;
	          }
	          .desc{
	            font-size: 20rpx;
	            color: #999;
	            margin-top: 10rpx;
	          }
	        }
	      }
	    }
	  }
	  
	}
</style>
